<template>
    <div class="share_content">
        <!-- 分享弹窗 -->
        <nut-overlay v-model:visible="isShow" @click="isShow = false">
            <div class="loading-main">
                <div class="loading-content">
                    <SvgaItem keyStr="1" name="loading" :active="true" class="tab_style" />
                </div>
            </div>
        </nut-overlay>
        <Toast v-model:visible="showToast">{{ t(toast_value) }}</Toast>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import SvgaItem from "@/components/SvgaItem.vue"
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const toast_value = ref()
const showToast = ref(false)
const props = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
})
const emit = defineEmits(['update:visible', 'close']);
const isShow = computed({
    get: function () {
        return props.visible;
    },
    set: function (value) {
        emit('update:visible', value);
    },
});

</script>

<style lang='scss' scoped>
.loading-main {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading-content {
    position: relative;
    width: 100%;
    text-align: center;
}

:deep(.nut-popup) {
    background: unset;
}
</style>